<template>
  <view class="teamcenter">
    <view class="porserSearch">
      <view class="searchbox flex flex-align flex-bt">
        <view class="searchicon flex flex-align">
          <view class="ids" style="margin-top: -2rpx;">
            <picker @change="bindPickerChange" confirm-button-color="#FE7431" :value="index" :range="array">
              <view class="left flex flex-align flex-bt">
                <view class="">{{array[index]}}</view>
              </view>
            </picker>
          </view>
          <image src="@/static/team/team22.png" mode="scaleToFill" />
        </view>
        <view class="search flex flex-align">
          <image src="@/static/team/team23.png" mode="scaleToFill" />
          <input type="text" placeholder="输入关键词搜索" />
          <view class="btns">搜索</view>
        </view>
      </view>
    </view>
    <view style="height: 110rpx;"></view>
    <view class="porser">
      <view class="list bgRadius boxshadow" v-for="(item,index) in 10" :key="index">
        <view class="centeruser flex flex-align">
          <image src="@/static/logo.png" mode="scaleToFill" />
          <view class="name one-omit">一只会费的主</view>
          <view>
            <view class="id">
              <view class="ids">ID</view>
              <view class="nums">207691</view>
            </view>
            <view class="id">
              <view class="ids"><uni-icons type="phone-filled" size="14" color="#fff"></uni-icons></view>
              <view class="nums">13935448971</view>
            </view>
          </view>
        </view>
        <view class="shoptitle">梅花鹿鹿茸片，这里是商品名称这里是商品名</view>
        <view class="flex flex-align listmain">
          <view class="flex-1">
            <view class="listTitle">佣金收入</view>
            <view class="listNum">¥2000</view>
          </view>
          <view class="flex-1">
            <view class="listTitle">佣金状态</view>
            <view class="listNum">冻结中</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { commissionDetail } from '@/api/user';
import { onLoad } from '@dcloudio/uni-app';
import { reactive, ref } from 'vue'
const type = ref(0)
const array = ['用户手机号', '商品名称', '订单号'];
const index = ref(0);
const dataList = ref<Recordable>([])
const bindPickerChange = (e:any) => {
  index.value = e.detail.value;
};
const dateRange = ref<string[]>([]);
const currentDate = new Date();
const year = currentDate.getFullYear();
const month = String(currentDate.getMonth() + 1).padStart(2, '0');
const day = String(currentDate.getDate()).padStart(2, '0');
const formattedDate = `${year}-${month}-${day}`;
dateRange.value = [formattedDate,formattedDate]
const frames = reactive({
  page:1,
  size: 10,
  type: 0,
  keyword: '',
  status: 0,
  start_at:dateRange.value[0],
  end_at:dateRange.value[1],
})
onLoad((e:any) => {
  type.value = e.type
  uni.setNavigationBarTitle({
    title: e.name
  })
  commisRecord()
})
function commisRecord(){
  commissionDetail(frames).then((res:any) => {
    if(res) {
      dataList.value = res
    }
  })
}
</script>

<style scoped lang="scss">
.porserSearch{position: fixed;top: 0;width: 100%;left: 0;box-sizing: border-box;z-index: 11;background: #F5F6F7;
  padding: 20rpx 30rpx 0;
  .searchbox{background: #FE7431;border-radius: 60rpx;
    .searchicon{padding:0 10rpx 0 30rpx;
      .ids{font-size: 24rpx;color: #fff;}
      image{width: 32rpx;height: 32rpx;}
   }
   .search{background: #fff;border-radius: 60rpx;flex: 1;padding: 10rpx 0;border: 2px solid #FE7431;
     image{width: 48rpx;height: 48rpx;margin: 0 10rpx;}
     input{flex: 1;height: 60rpx;font-size: 26rpx;}
     .btns{color: #FE7431;padding: 0 20rpx;font-weight: bold;}
   }
 }
}
.uni-picker-container .uni-picker-action.uni-picker-action-confirm {
  color: #FF0000; /* App平台的红色按钮 */
}
.teamcenter{padding-bottom: 4rpx;}
  .list{margin: 30rpx;padding: 30rpx;
    image{width: 60rpx;height: 60rpx;border-radius: 100%;margin-right: 16rpx;}
    .centeruser{color: #323233;
      .name{font-size:24rpx;font-weight: 600;width: 140rpx;}
      .id{font-size: 24rpx;margin-top: 10rpx;background: linear-gradient(to right,#FFF2E7,#FFDFD9);padding:2rpx 16rpx 2rpx 0;border-radius:30rpx 30rpx 0 30rpx;height:34rpx;display: inline-block;
        margin-right: 20rpx;
        .ids{background: #FE7431;color: #fff;border-radius:30rpx 0rpx 30rpx 30rpx;width: 50rpx;text-align: center;margin-right: 10rpx;height: 100%;display: inline-block;}
        .nums{display: inline-block;color: #FE7431;font-weight: 400;}
      }
      .id:last-child{margin-right: 0;}
    }
    .shoptitle{
     font-size: 28rpx;margin: 16rpx 0;font-weight: bold;
    }
   .listmain{margin-top: 20rpx;background: #F3F4F7;text-align: center;padding: 30rpx 0;border-radius: 10rpx;
    .listTitle{font-size: 24rpx;color: #999;}
    .listNum{font-size: 32rpx;color: #323233;font-weight: 600;margin-top: 10rpx;}
    .flex-1{position: relative;}
    .flex-1:last-child::after{position: absolute;top: 50%;left: 0;width: 2rpx;height: 40rpx;margin-top: -20rpx;background: #C8C9CC;content: '';}
   }
  }
  
</style>